<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import i18n from "@/locals";
import JNuber from "@/components/j-number/index.vue";
import JEmpty from "@/components/j-empty/index.vue";
import { formatEnergy } from "@/comm/energy";
import { pageIdx, getInvite, ResObj } from "./script/table";
import JLoding from "@/components/j-loding/index.vue"
import JEnergy from "@/components/j-energy/index.vue"

const subs = ref([
    { label: i18n.global.t("message.Invite.table.a"), prop: "email", flex: 1 },
    { label: i18n.global.t("message.Invite.table.b"), prop: "userIdStr", flex: 3 },
    { label: i18n.global.t("message.Invite.table.c"), prop: "regTime", flex: 3 },
    // { label: i18n.global.t("message.Invite.table.d"), prop: "email", flex: 2 },
    { label: i18n.global.t("message.Invite.table.e"), prop: "energy", flex: 3 },
    // { label: i18n.global.t("message.Invite.table.f"), prop: "energy", flex: 1 }
]);

enum LoginType {
    Login = 1,
    NotLogin = 2
}

watch(pageIdx, () => getInvite());
onMounted(async () => await getInvite());
</script>

<template>
    <div class="tb">
        <!-- <VRow class="had" no-gutters>
            <VCol v-for="item in subs" :cols="item.flex">{{ item.label }}</VCol>
        </VRow> -->
        <div class="had">
            <div v-for="item in subs" :key="item.label">
                {{ item.label }}
            </div>
        </div>
        <div class="c-title-t4" v-for="(item, idx) in ResObj?.records">
            <!-- <VCol cols="1" class="sort">{{ idx + 1 }}</VCol>
            <VCol cols="4">{{ item.id }}</VCol>
            <VCol cols="4">{{ `${new Date(item.regTime).toLocaleDateString()} ${new
                Date(item.regTime).toLocaleTimeString()}` }}</VCol>
            <VCol cols="3" style="color: var(--main)">
                <JNuber :num="formatEnergy(item.energy)" notformat price1></JNuber>
            </VCol> -->
            <div class="">{{ idx + 1 }}</div>
            <div class="">{{ item.id }}</div>

            <div class="">{{ `${new Date(item.regTime).toLocaleDateString()} ${new
                Date(item.regTime).toLocaleTimeString()}` }}</div>
            <div class="" style="color: var(--main)">
                <JNuber :num="formatEnergy(item.energy)" notformat price1></JNuber>
            </div>

            <!-- <VCol cols="2">{{ item.userName }}</VCol> -->

            <!-- <JEnergy :num="item.energy" :fix="0"></JEnergy> -->

            <!-- <VCol cols="1" v-if="item.userType == LoginType.Login">{{ $t('message.Global.LoggedIn') }}</VCol>
            <VCol cols="1" v-show="item.userType == LoginType.NotLogin">{{ $t('message.Global.NotCertified') }}</VCol> -->
        </div>
        <JEmpty v-show="ResObj.total === 0"></JEmpty>
        <!-- <JLoding v-if="isLoding"></JLoding> -->
    </div>
    <v-pagination v-show="ResObj.pages > 1" :length="ResObj.pages" :total-visible="3" v-model="pageIdx"></v-pagination>
</template>
<style lang="less" scoped>
.sort {
    width: 28px !important;
    flex-grow: 0 !important;
    flex: 0 !important;
}

.had {
    padding: 8px 20px;

    >div:nth-child(1) {
        margin-right: 10px;
        margin-left: 0;
        flex: 0;


    }

    >div:nth-child(2) {
        flex: 1;
        margin-left: 0;
        text-align: left;

    }

    >div:nth-child(3) {

        text-align: center;


    }

    >div {
        flex: 1;
        text-align: right;
        margin-left: auto;
    }
}

.c-title-t4 {
    border-bottom: 1px solid #32363f;
    height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 20px;

    >div:nth-child(1) {
        flex: 0;

        margin-right: 10px;
        margin-left: 0;

    }

    >div:nth-child(2) {
        margin-left: 0;
        text-align: left;


    }

    >div:nth-child(3) {
        text-align: center;

    }

    >div {
        flex: 1;
        text-align: right;

        margin-left: auto;
    }
}

@import url("./index.less");
</style>
